<template>
  <el-dialog
    top="30px"
    width="800px"
    title="登记代偿"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <approve-info
      ref="info"
      :view-mode="false"
      :related-data="related"
      :process-type="2"
      v-loading="loading"
      @success="handleSuccess"
      @dismiss="handleDismiss"
    ></approve-info>
  </el-dialog>
</template>

<script>
import { getRelated } from '@/credit/views/county/unionProvince/components/projectApprove/index'

import ApproveInfo from '@/credit/views/city/risk/instead/ApproveInfo'

export default {
  components: {
    ApproveInfo,
  },
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      loading: false,
      related: {},
      unData: {},
    }
  },
  computed: {},
  watch: {
    visible(val) {
      if (val) {
        this.getData()
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    handleDismiss() {
      this.beforeClose()
    },
    handleSuccess() {
      this.$emit('success')
      this.beforeClose()
    },
    getData() {
      const { queryId } = this
      this.related = {}

      if (!queryId) {
        return
      }

      this.loading = true
      return Promise.all([getRelated(queryId), this.$store.dispatch('getEntrustContract', queryId)])
        .then(([related]) => {
          this.related = related
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
